<template>
  <svg :class="svgClass" class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconClassName" :fill="color" />
  </svg>
</template>
<script setup lang="ts">
import { computed } from 'vue'
const props = withDefaults(
  defineProps<{
    icon: string
    class?: string
    color?: string
    size?: string
  }>(),
  {
    color: '#888',
    size: '16px'
  }
)

// 图标在 iconfont 中的名字
const iconClassName = computed(() => {
  return `#icon-${props.icon}`
})
// 给图标添加上类名
const svgClass = computed(() => {
  if (props.class) {
    return `svg-icon ${props.class}`
  }
  return 'svg-icon'
})
</script>
<style scoped lang="scss">
.svg-icon {
  /* 我的1rem-16px */
  width: v-bind(size);
  height: v-bind(size);
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}

.svg-icon:last-of-type {
  fill: v-bind(color);
}
</style>
